<template>
	<Transition name="window">
		<div v-if="isVisible" v-show="!isMinimized" :class="['window']" :style="windowStyle" ref="windowRef">
			<div class="window-header" @mousedown="startDrag">
				<div class="window-title">
					<img :src="param1">
					<span>{{ title }}</span>
				</div>
				<div class="window-controls">
					<button class="control-button minimize" @click="minimize">
						<svg width="10" height="10" viewBox="0 0 10 10">
							<rect x="0" y="4" width="10" height="2" fill="currentColor" />
						</svg>
					</button>
					<button class="control-button maximize" @click="toggleMaximize">
						<svg width="10" height="10" viewBox="0 0 10 10">
							<rect x="0" y="0" width="10" height="10" fill="none" stroke="currentColor"
								stroke-width="2" />
						</svg>
					</button>
					<button class="control-button close" @click="close">
						<svg width="10" height="10" viewBox="0 0 10 10">
							<path d="M0 0 L10 10 M10 0 L0 10" stroke="currentColor" stroke-width="2" />
						</svg>
					</button>
				</div>
			</div>
			<div class="window-content">
				<component :is="contentComponent" />
			</div>
			<!-- 添加调整大小的8个处理器 -->
			<div class="resize-handle top" @mousedown="startResize('top')"></div>
			<div class="resize-handle right" @mousedown="startResize('right')"></div>
			<div class="resize-handle bottom" @mousedown="startResize('bottom')"></div>
			<div class="resize-handle left" @mousedown="startResize('left')"></div>
			<div class="resize-handle top-left" @mousedown="startResize('top-left')"></div>
			<div class="resize-handle top-right" @mousedown="startResize('top-right')"></div>
			<div class="resize-handle bottom-left" @mousedown="startResize('bottom-left')"></div>
			<div class="resize-handle bottom-right" @mousedown="startResize('bottom-right')"></div>
		</div>
	</Transition>
</template>

<script setup>
import {
	ref,
	computed,
	onMounted,
	onUnmounted,
	defineAsyncComponent,
	defineExpose,
	watch
} from 'vue';

const props = defineProps({
	isVisible: Boolean,
	id: Number,
	param1: String,
	title: {
		type: String,
		default: 'Window'
	},
	address: String
});

const emit = defineEmits(['update:isVisible', 'close', 'minimize']);

const windowRef = ref(null);
const isDragging = ref(false);
const dragOffset = ref({
	x: 0,
	y: 0
});
const position = ref({
	x: 100,
	y: 100
});
const originalPosition = ref({
	x: 100,
	y: 100
});
const originalSize = ref({
	width: 1000,
	height: 650
});
const isMaximized = ref(false);
const isMinimized = ref(false);
const isResizing = ref(false);
const resizeDirection = ref('');

const MIN_WIDTH = 700;
const MIN_HEIGHT = 500;

const windowStyle = computed(() => ({
	left: `${position.value.x}px`,
	top: `${position.value.y}px`,
	width: isMaximized.value ? '100%' : `${originalSize.value.width}px`,
	height: isMaximized.value ? '100%' : `${originalSize.value.height}px`,
	transition: isDragging.value || isResizing.value ? 'none' : 'all 0.3s ease'
}));

const contentComponent = computed(() => {
	switch (props.id) {
		case 2: // 设置页面
			return defineAsyncComponent(() => import('./setting.vue'));
		case 1: // 设置页面
			return defineAsyncComponent(() => import('./theComputer.vue'));
		default:
			if (!props.address) return defineAsyncComponent(() => import('./404.vue'));
			return defineAsyncComponent(() => {
				// 每次都重新导入browser组件
				return import(/* @vite-ignore */ `./browser.vue?t=${Date.now()}`).then(module => {//@vite-ignore忽略这个动态导入的分析
					console.log('注入browser组件的address', props.address)
					module.default.props.address = {
						type: String,
						default: props.address
					};
					return module;
				});
			});
	}
});

const startDrag = (event) => {
	if (isMaximized.value) return;
	isDragging.value = true;
	dragOffset.value = {
		x: event.clientX - position.value.x,
		y: event.clientY - position.value.y
	};
	document.addEventListener('mousemove', drag);
	document.addEventListener('mouseup', stopDrag);
};

const drag = (event) => {
	if (isDragging.value) {
		position.value = {
			x: event.clientX - dragOffset.value.x,
			y: event.clientY - dragOffset.value.y
		};
	}
};

const stopDrag = () => {
	isDragging.value = false;
	document.removeEventListener('mousemove', drag);
	document.removeEventListener('mouseup', stopDrag);
};

const startResize = (direction) => {
	isResizing.value = true;
	resizeDirection.value = direction;
	document.addEventListener('mousemove', resize);
	document.addEventListener('mouseup', stopResize);
};

const resize = (event) => {
	if (isResizing.value) {
		const dx = event.movementX;
		const dy = event.movementY;
		let newWidth = originalSize.value.width;
		let newHeight = originalSize.value.height;
		let newX = position.value.x;
		let newY = position.value.y;

		switch (resizeDirection.value) {
			case 'right':
				newWidth += dx;
				break;
			case 'bottom':
				newHeight += dy;
				break;
			case 'left':
				newWidth -= dx;
				newX += dx;
				break;
			case 'top':
				newHeight -= dy;
				newY += dy;
				break;
			case 'top-left':
				newWidth -= dx;
				newHeight -= dy;
				newX += dx;
				newY += dy;
				break;
			case 'top-right':
				newWidth += dx;
				newHeight -= dy;
				newY += dy;
				break;
			case 'bottom-left':
				newWidth -= dx;
				newHeight += dy;
				newX += dx;
				break;
			case 'bottom-right':
				newWidth += dx;
				newHeight += dy;
				break;
		}

		// 应用最小宽度和高度限制
		if (newWidth >= MIN_WIDTH) {
			originalSize.value.width = newWidth;
			position.value.x = newX;
		}
		if (newHeight >= MIN_HEIGHT) {
			originalSize.value.height = newHeight;
			position.value.y = newY;
		}
	}
};

const stopResize = () => {
	isResizing.value = false;
	document.removeEventListener('mousemove', resize);
	document.removeEventListener('mouseup', stopResize);
};

const minimize = () => {
	isMinimized.value = true;
	emit('minimize', {
		id: props.id
	});
};

const restoreWindow = () => {
	isMinimized.value = false;
};

const toggleMaximize = () => {
	if (!isMaximized.value) {
		originalPosition.value = {
			...position.value
		};
		originalSize.value = {
			width: windowRef.value.offsetWidth,
			height: windowRef.value.offsetHeight
		};
		position.value = {
			x: 0,
			y: 0
		};
	} else {
		position.value = {
			...originalPosition.value
		};
	}
	isMaximized.value = !isMaximized.value;
};

const close = () => {
	emit('update:isVisible', false);
	emit('close');
};

watch(() => props.isVisible, (newValue) => {
	if (newValue) {
		isMinimized.value = false;
	}
});

onMounted(() => {
	if (windowRef.value) {
		position.value = {
			x: (window.innerWidth - windowRef.value.offsetWidth) / 2,
			y: (window.innerHeight - windowRef.value.offsetHeight) / 2
		};
		originalPosition.value = {
			...position.value
		};
		originalSize.value = {
			width: windowRef.value.offsetWidth,
			height: windowRef.value.offsetHeight
		};
	}
});

onUnmounted(() => {
	document.removeEventListener('mousemove', drag);
	document.removeEventListener('mouseup', stopDrag);
	document.removeEventListener('mousemove', resize);
	document.removeEventListener('mouseup', stopResize);
});

defineExpose({
	restoreWindow
});
</script>

<style scoped lang="less">
.window {
	position: fixed;
	backdrop-filter: blur(10px);
	border-radius: 8px;
	/* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 1000;
	box-shadow: 0 0 6px 1px var(--thisShadow);
	background-color: var(--thisTheme);
	color: var(--thisText);
	min-width: 300px;
	min-height: 200px;
}


.window-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 16px;
	backdrop-filter: blur(5px);
	cursor: move;
}

.light .window-header {
	background: rgba(255, 255, 255, 0.1);
}

.dark .window-header {
	background: rgba(0, 0, 0, 0.1);
}

.window-title {
	font-weight: bold;
	font-size: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	img {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
}

.window-controls {
	display: flex;
}

.control-button {
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	color: var(--thisText);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}

.control-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.3s ease, height 0.3s ease;
	/* border-radius: 50%; */
}

.control-button:hover::before {
	width: 200%;
	height: 200%;
}

.control-button.minimize:hover::before,
.control-button.maximize:hover::before {
	background-color: rgba(128, 128, 128, 0.2);
}

.control-button.close:hover::before {
	background-color: #e81123;
}

.control-button svg {
	width: 10px;
	height: 10px;
	position: relative;
	z-index: 1;
}

.dark .control-button:hover::before {
	background-color: rgba(255, 255, 255, 0.3);
}

.dark .control-button.close:hover::before {
	background-color: #e81123;
}

.window-content {
	// width: 100%;
	// height: 100%;
	// display: flex;
	flex: 1;
	// overflow: auto;//这里有问题
	// padding: 16px;
}

.window-enter-active,
.window-leave-active {
	transition: opacity 0.3s, transform 0.3s;
}

.window-enter-from,
.window-leave-to {
	opacity: 0;
	transform: scale(0.9);
}

.close:hover {
	background-color: #e81123 !important;
	border-radius: 1;
	color: white;
}

.maximized:hover {
	background-color: #bcbcbc !important;
	border-radius: 1;
	color: white;
}

.buttons button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.buttons button svg {
	width: 12px;
	height: 12px;
}

.resize-handle {
	position: absolute;
	background: transparent;
}

.resize-handle.top {
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	cursor: n-resize;
}

.resize-handle.right {
	top: 0;
	right: 0;
	bottom: 0;
	width: 5px;
	cursor: e-resize;
}

.resize-handle.bottom {
	bottom: 0;
	left: 0;
	right: 0;
	height: 5px;
	cursor: s-resize;
}

.resize-handle.left {
	top: 0;
	left: 0;
	bottom: 0;
	width: 5px;
	cursor: w-resize;
}

.resize-handle.top-left {
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	cursor: nw-resize;
}

.resize-handle.top-right {
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	cursor: ne-resize;
}

.resize-handle.bottom-left {
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	cursor: sw-resize;
}

.resize-handle.bottom-right {
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	cursor: se-resize;
}
</style>